<template>
  <div class="container">
    <MyHeadNav> 芝麻信用详情 </MyHeadNav>
    <div class="banner">
      <img src="../../assets/image/img_banner.png" alt="" />
    </div>
    <div class="content">
      <div class="title">芝麻信用的好处</div>
      <div class="content-wrap">
        <div class="content-item">
          <div>
            <img src="../../assets/image/img_tu01.png" alt="" />
            <p class="text">有信用,减押金</p>
            <div class="desc">
              <p>授权芝麻信用 满650分</p>
              <p>相应房源享受押金入住</p>
            </div>
          </div>
        </div>
        <div class="content-item content-item1">
          <div>
            <img
              class="right-img"
              src="../../assets/image/img_tu02.png"
              alt=""
            />
            <div class="move">
              <p class="text">有信用,减押金</p>
              <div class="desc">
                <p>授权芝麻信用 满650分</p>
                <p>相应房源享受押金入住</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <button>立即授权</button>
    </div>
  </div>
</template>

<script>
import MyHeadNav from "../../components/MyNavHead";
export default {
  name: "ZhimaCredit",
  components: {
    MyHeadNav,
  },
};
</script>

<style scoped lang="less">
.container {
  .banner {
    margin-top: 1.2rem;
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    margin-left: 0.68rem;
    white-space: nowrap;
  }
  .content {
    width: 95%;
    height: 6rem;
    margin: 0 auto;
    margin-top: 0.42rem;
    padding-top: 0.32rem;
    border-radius: 3px;
    box-shadow: 0 0 1px #ccc;
    .title {
      color: #ff5555;
    }
    .content-wrap {
      width: 100%;
      display: flex;
      .content-item {
        display: flex;
        div {
          width: 50%;
          img {
            width: 132px;
            margin: 0.32rem -0.24rem 0.21rem 0.5rem;
          }
          p {
            white-space: nowrap;
            font-size: 15px;
            color: rgba(0, 0, 0, 0.8);
          }
          .desc {
            margin: 0.58rem 0.45rem 0.72rem 0.2rem;
            p {
              white-space: nowrap;
            }
          }
        }
      }
    }
    .move {
      margin-top: 0.88rem;
    }
  }
  .btn {
    width: 90%;
    margin: 0 auto;
    margin-top: 1rem;
    color: #fff;
    button {
      width: 100%;
      height: 0.78rem;
      line-height: 0.78rem;
      border-radius: 3px;
      letter-spacing: 1px;
      background: #ff5555;
    }
  }
}
</style>